<template>
  <div id="Unit">
    <!-- 添加/编辑基本单位对话框 -->
    <el-dialog
      :title="basicUnitDialogTitle"
      :visible.sync="basicUnitDialogVisible"
      @close="resetBasicUnitForm"
    >
      <el-form :model="basicUnitForm">
        <el-form-item label="基本单位" :label-width="formLabelWidth">
          <el-input
            v-model="basicUnitForm.unidname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="basicUnitDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitBasicUnit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 添加/编辑多计量单位对话框 -->
    <el-dialog
      :title="auxiliaryUnitDialogTitle"
      :visible.sync="auxiliaryUnitDialogVisible"
      @close="resetAuxiliaryUnitForm"
    >
      <el-form :model="auxiliaryUnitForm">
        <el-form-item label="基本单位" :label-width="formLabelWidth">
          <el-select
            v-model="auxiliaryUnitForm.uid"
            placeholder="请选择基本单位"
          >
            <el-option
              v-for="unit in basicUnits"
              :key="unit.id"
              :label="unit.unidname"
              :value="unit.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="副单位" :label-width="formLabelWidth">
          <el-input
            v-model="auxiliaryUnitForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="包含基本单位数量" :label-width="formLabelWidth">
          <el-input-number
            v-model="auxiliaryUnitForm.rate"
            :min="1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auxiliaryUnitDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAuxiliaryUnit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 基本单位表格 -->
    <el-button type="primary" @click="showAddBasicUnitDialog"
      >添加基本单位</el-button
    >
    <el-table :data="basicUnits" style="width: 100%" border>
      <el-table-column label="ID" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="unidname" label="基本单位"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="showEditBasicUnitDialog(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteBasicUnit(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 多计量单位表格 -->
    <el-button type="primary" @click="showAddAuxiliaryUnitDialog"
      >添加多计量单位</el-button
    >
    <el-table :data="auxiliaryUnits" style="width: 100%" border>
      <el-table-column label="ID" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="name" label="副单位"></el-table-column>
      <el-table-column prop="uname" label="基本单位"></el-table-column>
      <el-table-column prop="rate" label="包含基本单位数量"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="showEditAuxiliaryUnitDialog(scope.row, scope.row.id)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteAuxiliaryUnit(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Unit",
  data() {
    return {
      basicUnits: [],
      auxiliaryUnits: [],
      basicUnitDialogVisible: false,
      auxiliaryUnitDialogVisible: false,
      basicUnitForm: {
        cid: 1,
        id: "",
        unidname: "",
      },
      auxiliaryUnitForm: {
        cid: 1,
        id: "",
        uid: "",
        name: "",
        rate: 1,
      },
      formLabelWidth: "120px",
      basicUnitDialogTitle: "添加基本单位",
      auxiliaryUnitDialogTitle: "添加多计量单位",
    };
  },
  created() {
    this.getBasicList();
  },
  methods: {
    getBasicList() {
      this.axios({
        url: "/erp/goods/basicUnit/getList",
      })
        .then((rs) => {
          this.getMultiUnit();
          this.basicUnits = rs.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getMultiUnit() {
      this.axios({
        url: "/erp/goods/multiUnit/getList",
      })
        .then((rs) => {
          this.auxiliaryUnits = rs.data.list;
          console.log("unit", rs.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    showAddBasicUnitDialog() {
      this.basicUnitDialogTitle = "添加基本单位";
      this.resetBasicUnitForm();
      this.basicUnitDialogVisible = true;
    },
    showEditBasicUnitDialog(row) {
      this.basicUnitDialogTitle = "编辑基本单位";
      this.basicUnitForm = { ...row };
      this.basicUnitDialogVisible = true;
    },
    deleteBasicUnit(id) {
      if (window.confirm("是否确认删除id为" + id + "的多单位？")) {
        this.axios({
          url: "/erp/goods/basicUnit/del",
          params: {
            id,
          },
        }).then((rs) => {
          if (rs.data.itStatus == true) {
            alert("删除成功！");
          } else {
            alert("删除失败！");
          }
          this.getBasicList();
          this.getMultiUnit();
        });
      }
    },
    submitBasicUnit() {
      if (this.basicUnitDialogTitle === "添加基本单位") {
        this.axios({
          url: "/erp/goods/basicUnit/add",
          method: "POST",
          data: {
            ...this.basicUnitForm,
          },
        }).then((rs) => {
          if (rs.data.itStatus == true) {
            alert("添加成功！");
          } else {
            alert("添加失败！");
          }
          this.getBasicList();
        });
      } else {
        this.axios({
          url: "/erp/goods/basicUnit/update",
          method: "POST",
          data: {
            ...this.basicUnitForm,
          },
        }).then((rs) => {
          if (rs.data.itStatus == true) {
            alert("修改成功！");
          } else {
            alert("修改失败！");
          }
          this.getBasicList();
          this.getMultiUnit();
        });
      }
      this.basicUnitDialogVisible = false;
    },
    resetBasicUnitForm() {
      this.basicUnitForm = {
        id: "",
        unidname: "",
      };
    },
    showAddAuxiliaryUnitDialog() {
      this.auxiliaryUnitDialogTitle = "添加多计量单位";
      this.resetAuxiliaryUnitForm();
      this.auxiliaryUnitDialogVisible = true;
    },
    showEditAuxiliaryUnitDialog(row, id) {
      this.auxiliaryUnitDialogTitle = "编辑多计量单位";
      this.auxiliaryUnitForm = { ...row };
      this.auxiliaryUnitDialogVisible = true;
    },
    deleteAuxiliaryUnit(id) {
      if (window.confirm("是否确认删除id为" + id + "的单位？")) {
        this.axios({
          url: "/erp/goods/multiUnit/delMultiUnit",
          params: {
            id,
          },
        }).then((rs) => {
          if (rs.data.result == true) {
            alert("删除成功！");
          } else {
            alert("删除失败！");
          }
          this.getBasicList();
          this.getMultiUnit();
        });
      }
    },
    submitAuxiliaryUnit() {
      if (this.auxiliaryUnitDialogTitle === "添加多计量单位") {
        this.axios({
          url: "/erp/goods/multiUnit/addMultiUnit",
          method: "POST",
          data: {
            ...this.auxiliaryUnitForm,
          },
        }).then((rs) => {
          if (rs.data.result == true) {
            alert("添加成功！");
          } else {
            alert("添加失败！");
          }
          this.getMultiUnit();
        });
      } else {
        this.axios({
          url: "/erp/goods/multiUnit/updateMultiUnit",
          method: "POST",
          data: {
            ...this.auxiliaryUnitForm,
          },
        }).then((rs) => {
          if (rs.data.result == true) {
            alert("修改成功！");
          } else {
            alert("修改失败！");
          }
          this.getMultiUnit();
        });
      }
      this.auxiliaryUnitDialogVisible = false;
    },
    resetAuxiliaryUnitForm() {
      this.auxiliaryUnitForm = {
        id: "",
        uid: "",
        name: "",
        rate: 1,
      };
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>